<template>
  <div class="punch-wrap">
    <div class="punch-search">
      <img src="./back.png" class="back" @click="backPage" onclick="return false"/>
      <div class="search-box">
        <img src="./left.png" class="pic1" @click="preDay" onclick="return false"/>
        <datetime format="YYYY-MM-DD" v-model="kaTime" class="title" :end-date="date"
                  @on-confirm="queryByDay"></datetime>
        <div class="pic2-box" @click="nextDay">

          <img src="./right.png" class="pic2" onclick="return false"/>
        </div>
      </div>
      <img src="./icon.png" class="search-btn" @click="search" onclick="return false"/>
    </div>

    <div class="screen-box">
      <div class="open-box" @click="openModal">
        <img src="./screening.png" class="pic3" onclick="return false"/>
        <span class="all">{{title}}</span>
        <img src="./pull.png" class="pic4" onclick="return false"/>
      </div>
      <div class="job-box">在职人数&nbsp;<span class="num1">{{allKa}}</span>&nbsp;未打卡&nbsp;<span
        class="num2">{{noKa}}</span></div>
    </div>

    <!--筛选-->
    <div class="screen-modal" v-show="showModal">
      <div class="screen-con">
        <div class="content-sec">
          <div class="sec" @click="queryScreen('all','全部')" :class="{'active2':type == 'all'}">全部
            <img src="./get.png" v-if="type == 'all'" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(3,'已打卡')" :class="{'active2':type == 3}">已打卡
            <img src="./get.png" v-if="type == 3" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(2,'打卡2次')" :class="{'active2':type == 2}">打卡2次
            <img src="./get.png" v-if="type == 2" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(1,'打卡1次')" :class="{'active2':type == 1}">打卡1次
            <img src="./get.png" v-if="type == 1" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen('no','未打卡')" :class="{'active2':type == 'no'}">未打卡
            <img src="./get.png" v-if="type == 'no'" class="pic7" onclick="return false"/>
          </div>
        </div>
      </div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad" class="punch-box"
    >
      <div class="punch-con" v-for="(item,index) in punchList" :key="index" v-if="punchList.length">
        <div class="punch-con1">
          <span class="username">{{item.userName}}</span>
          <div class="time-box">
            <div class="time-con">
              <span class="time work-class1" :class="{'work-class2':(item.kaTime!=null && item.kaTime.length)}">{{item.workClass}}:&nbsp;</span>
              <div class="time" v-if="item.kaTime!=null && item.kaTime.length">
                <span class="clock1" v-for="(kaTime,i) in item.kaTime" :key="i">{{kaTime | formatSec}}</span>
              </div>
              <div class="time" v-else>
                <span class="clock2">未打卡</span>
              </div>
            </div>
            <div class="number">{{kaTime}}&nbsp;打卡<span>{{item.punchNum}}</span>次
            </div>
          </div>
        </div>
        <div class="punch-con2">
          <span>身份证号：{{item.userCardNumber}}</span>
          <span>企业：{{item.mechanismName}}</span>
          <span>入职日期：{{item.workTime}}</span>
          <div class="work-num" v-if="item.workNum!='' && item.workNum!=null">工号：{{item.workNum}}</div>
          <div class="work-num" v-else>工号：<span class="clock3">未添加</span></div>
          <span>部门（段位）：{{item.duan}}</span>
          <span>打卡地点：{{item.address}}</span>
        </div>
      </div>
    </van-list>


    <div class="empty-wrap" v-if="punchList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import {Datetime} from 'vux'
  import {formatDate, getYearMonthDay, getNextDate} from "../../config/util"

  export default {
    data() {
      return {
        kaTime: getYearMonthDay(),
        punchList: [],
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false,
        date: "",
        title: "全部",
        showModal: false,
        type: "all",
        noKa: "",
        allKa: "",
        punchTime: "",
        punchNum: "",
        mechanismId: "",
        userSign: ""
      }
    },
    mounted() {
      this.mechanismId = this.$route.query.id;
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    methods: {
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryPunch();
            this.timer = null;
          }, 500)
        }
      },
      preDay() {//前一天
        this.kaTime = getNextDate(this.kaTime, -1);
        this.initVanList();
      },
      nextDay() {//后一天
        if (this.kaTime == getYearMonthDay()) {
          return;
        }
        this.kaTime = getNextDate(this.kaTime, 1);
        this.initVanList();
      },
      search() {//根据条件查询
        this.$router.push({path: "/punshrecord", query: {"month": this.kaTime, "mechanismId": this.mechanismId}});
      },
      queryScreen(key, val) {//根据筛选查询
        this.type = key;
        this.title = val;
        this.showModal = false;
        this.initVanList();
      },
      queryByDay(value) {//根据日期查询
        this.kaTime = value;
        this.initVanList();
      },
      initVanList() {//初始化
        this.currentPage = 1;
        this.PageSize = 20;
        this.punchList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      openModal() {//打开筛选
        this.showModal = true;
      },
      queryPunch() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/get_user_ka_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/data/get_user_ka_list?mechanismId=" + this.mechanismId + "&kaTime=" + this.kaTime + "&kaStatus=" + this.type + "&page=" + this.currentPage + "&size=" + this.PageSize + "&sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
            let resultObj = res.data;

            if (resultObj.code == 0 && resultObj.data != null) {
              this.noKa = resultObj.data.noKa;
              this.allKa = resultObj.data.allKa;
              if (resultObj.data.list != null && resultObj.data.list.length > 0) {
                this.punchList = this.punchList.concat(resultObj.data.list);

                for (let i = 0; i < this.punchList.length; i++) {
                  if (this.punchList[i].kaTime != null) {
                    this.punchList[i].punchNum = this.punchList[i].kaTime.length;
                  } else {
                    this.punchList[i].punchNum = 0;
                  }
                }
                //加载状态结束
                this.loading = false;
                this.currentPage++;
              } else {//数据全部加载完成
                this.loading = false;
                if (this.punchList.length >= resultObj.data.list.length) {
                  this.finished = true;
                }
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }
        ).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      backPage() {
        this.$router.go(-1);
      }
    },
    filters: {
      format(time) {
        return time.substr(0, 4) + "-" + time.substr(5, 2) + "-" + time.substr(8, 2);
      },
      formatSec(time) {
        return time.substr(11, 2) + ":" + time.substr(14, 2);
      }
    },
    components: {
      Datetime
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"

  .punch-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .punch-search
      fj(center, center)
      position: fixed
      top: 0
      z-index: 99
      wh(100%, 1.2rem)
      background: rgba(60, 175, 255, 1)
      .back
        margin-left: 0.2rem
        margin-right: auto
        wh(0.48rem, 0.48rem)
      .search-box
        display: flex
        align-items: center
        height: 0.4rem
        .pic1
          wh(0.4rem, 0.4rem)
        .pic2-box
          wh(0.4rem, 0.4rem)
          .pic2
            wh(100%, 100%)
        .title
          padding-left: 0.32rem
          padding-right: 0.32rem
          font-size: 0.427rem
          color: rgba(255, 255, 255, 1)
        .title >>> .weui-cell__ft
          color: rgba(255, 255, 255, 1)
        .title >>> .weui-cell__ft .vux-cell-value
          color: rgba(255, 255, 255, 1)
      .search-btn
        margin-left: auto
        wh(0.533rem, 0.533rem)
        margin-right: 0.4rem
    .screen-box
      display: flex
      align-items: center
      wh(100%, 0.8rem)
      position: fixed
      top: 1.2rem
      z-index: 99
      background: rgba(242, 242, 242, 1)
      .open-box
        display: flex
        align-items: center
        wh(auto, 0.8rem)
        margin-left: 0.293rem
        .pic3
          margin-right: 0.173rem
          wh(0.48rem, 0.48rem)
        .all
          size-color(0.373rem, rgba(102, 102, 102, 1))
          margin-right: 0.12rem
        .pic4
          wh(0.32rem, 0.32rem)

      .job-box
        margin-right: 0.333rem
        margin-left: auto
        size-color(0.32rem, rgba(102, 102, 102, 1))
        .num1
          color: $color
          font-weight: 500
        .num2
          color: #FF5353
          font-weight: 500
    .punch-box
      position: absolute
      top: 2rem
      width: 100%
      background: rgba(242, 242, 242, 1)
      .punch-con
        wh(100%, 5.12rem)
        background: rgba(255, 255, 255, 1)
        margin-bottom: 0.267rem
        .punch-con1
          margin: 0 auto
          display: flex
          justify-content: space-between
          align-items: center
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          wh(93.6%, 1.173rem)
          .username
            font-size: 0.453rem
            color: rgba(51, 51, 51, 1)
          .time-box
            display: flex
            flex-direction: column
            align-items: flex-end
            .time-con
              display: flex
              align-items: center
              .time
                font-size: 0.373rem
                font-weight: 500
                padding-bottom: 0.047rem
              .clock1
                color: rgba(60, 175, 255, 1)
                padding-left: 0.1rem
              .clock2
                color: rgba(255, 83, 83, 1)
              .work-class1
                color: rgba(255, 83, 83, 1)
              .work-class2
                color: rgba(60, 175, 255, 1)
            .number
              padding-top: 0.047rem
              font-size: 0.32rem
              color: rgba(153, 153, 153, 1)
        .punch-con2
          font-size: 0.373rem
          color: rgba(102, 102, 102, 1)
          display: flex
          flex-direction: column
          justify-content: center
          margin: 0 auto
          wh(93.6%, 3.92rem)
          span
            padding-bottom: 0.24rem
            &:nth-child(1)
              padding-top: 0.32rem
          .work-num
            margin-bottom: 0.24rem
          .clock3
            color: #CCC

    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)

    .screen-modal
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: 99
      background-color: rgba(0, 0, 0, 0.5)
      .screen-con
        wh(100%, 5.867rem)
        background: #FFF
        .content-sec
          display: flex
          flex-direction: column
          wh(auto, 100%)
          margin-left: 0.48rem
          margin-right: 0.507rem
          .sec
            display: flex
            align-items: center
            height: 1.067rem
            line-height: 1.067rem
            size-color(0.427rem, rgba(102, 102, 102, 1))
            &:nth-child(1)
              margin-top: 0.267rem
          .active2
            color: $color
          .pic7
            margin-left: auto
            wh(0.64rem, 0.64rem)
</style>
